<template>
    <div>
        
        <div class="content">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" >
                
                <el-form-item label="用户名" class="form-header">
                    <el-select
                      v-model="form.userId"
                      placeholder="请选择"
                      class="slect"
                      @change="getChange"
                    >
                      <el-option
                        v-for="item in userList"
                        :key="item.userId"
                        :label="item.userName"
                        :value="item.userId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                
                <el-form-item label="推广计划" class="form-header">
                    <el-input v-model="form.promotionPlan" placeholder="推广计划"></el-input>
                </el-form-item>
                <el-form-item label="创意" class="form-header">
                    <el-input v-model="form.originality" placeholder="创意"></el-input>
                </el-form-item>
                <el-form-item label="关键词/网址" class="form-header">
                    <el-input v-model="form.keyword" placeholder="关键词/网址"></el-input>
                </el-form-item>
                <el-form-item label="搜索词" class="form-header">
                    <el-input v-model="form.searchTerm" placeholder="搜索词"></el-input>
                </el-form-item>
                <el-form-item label="账户添加状态" class="form-header">
                    <el-select v-model="form.additionStatus" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.label"
                          :label="item.label"
                          :value="item.label">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="计划类型" class="form-header">
                    <el-select v-model="form.planType" placeholder="请选择">
                        <el-option
                          v-for="item in options2"
                          :key="item.label"
                          :label="item.label"
                          :value="item.label">
                        </el-option>
                      </el-select>
                  </el-form-item>
                <el-form-item label="推广单元" class="form-header">
                    <el-input v-model="form.promotionUnit" placeholder="所属计划/单元"></el-input>
                </el-form-item>
                <el-form-item label="触发模式" class="form-header">
                    <el-select v-model="form.mode" placeholder="请选择">
                        <el-option
                          v-for="item in options3"
                          :key="item.label"
                          :label="item.label"
                          :value="item.label">
                        </el-option>
                      </el-select>
                </el-form-item>
                <el-form-item label="消费" class="form-header">
                    <el-input v-model="form.consumption" placeholder="消费"></el-input>
                </el-form-item>
                <el-form-item label="展现" class="form-header">
                    <el-input v-model="form.toShow" placeholder="展现"></el-input>
                </el-form-item>
                <el-form-item label="点击" class="form-header">
                    <el-input v-model="form.click" placeholder="点击"></el-input>
                </el-form-item>
                <el-form-item label="搜索词类型" class="form-header">
                    <el-select v-model="form.promotionType" placeholder="请选择">
                        <el-option
                          v-for="item in options4"
                          :key="item.label"
                          :label="item.label"
                          :value="item.label">
                        </el-option>
                      </el-select>
                </el-form-item>
              </el-form>
              
        </div>
        <div class="queding">
          <div><el-button type="primary" v-if="!productId" @click="btnQue">确定</el-button></div>
          <div><el-button type="primary" v-if="productId" @click="btnQue2">确定</el-button></div>
          <div><el-button type="primary" plain @click="btnQuxiao">取消</el-button></div>
        </div>
    </div>
</template>
<script>
import { listAllUser } from "@/api/caiwu/zhgl";
import {add,edit} from '@/api/sstg/sousuoci'
export default{
    name:'zhanghugai',
    data(){
        return{ 
            userList:[],
            productId:"",
            value:"",
            form:{
                userId:"",
                userName:"",
                promotionPlan:"",
                originality:"",
                keyword:"",
                searchTerm:"",
                additionStatus:"",
                planType:"",
                promotionUnit:"",
                mode:"",
                consumption:"",
                toShow:"",
                click:"",
                promotionType:"",

            },
            options4:[
                {
                    vlaue:'推广业务',
                    label:'推广业务'
                },
                {
                    vlaue:'营销目标',
                    label:'营销目标'
                },
            ],
            options:[
                {
                    vlaue:'已添加',
                    label:'已添加'
                },
                {
                    vlaue:'未添加',
                    label:'未添加'
                },
                {
                    vlaue:'不可添加',
                    label:'不可添加'
                },
               
            ],
            options2:[
                {
                    vlaue:'标准计划',
                    label:'标准计划'
                },
                {
                    vlaue:'极简计划',
                    label:'极简计划'
                }
               
            ],
            options3:[
                {
                    vlaue:'智能匹配',
                    label:'智能匹配'
                },
                {
                    vlaue:'智能匹配-人群智选',
                    label:'智能匹配-人群智选'
                },
                {
                    vlaue:'短语',
                    label:'短语'
                },
                {
                    vlaue:'精确',
                    label:'精确'
                },
                {
                    vlaue:'智能匹配（自动定向）',
                    label:'智能匹配（自动定向）'
                },
                {
                    vlaue:'网址定向',
                    label:'网址定向'
                },
                {
                    vlaue:'商品定向',
                    label:'商品定向'
                },
               
            ],
            options:[
                {
                    vlaue:'1',
                    label:'推广业务'
                },
                {
                    vlaue:'2',
                    label:'营销目标'
                },
                
                
               
            ],
          
            formInline:{}
        }
    },
    props:{
        objDate2: {
        type: Object,
        default: () => {},
      },
    },
    mounted() {
        this.getList()
        if(this.objDate2){
            this.form=this.objDate2
            this.productId=this.objDate2.userId
        }
    },
    methods: {
       
            //选择
            getChange(e){
            
            for(let item of  this.userList){
                if(e == item.userId){
                    this.form.userName=item.userName
                }
            }
            console.log('选择', this.form.userName)
        },
                    /** 查询用户列表 */
            getList() {
                listAllUser({}).then((res) => {
                res.data.forEach((item) => {
                    this.userList.push({
                    userName: item.userName,
                    userId: item.userId,
                    });
                });
                });
            },
        //修改
        btnQue2(){
            edit(this.form).then((res)=>{
                if(res.code ==200){
                    this.$message({
                    message: res.msg,
                    type: 'success'
                    });
                    this.btnQuxiao()
                }
            })
        },
        //确定
        btnQue(){
            add(this.form).then((res)=>{
                if(res.code ==200){
                    this.$message({
                    message: res.msg,
                    type: 'success'
                    });
                    this.btnQuxiao()
                }
            })
        },
      btnQuxiao(){
        this.$emit('quxiao')
      }
    },
}
</script>
<style scoped>
.queding{
  padding-bottom: 28px;
  text-align: center;
  display: flex;
  justify-content: space-around;
  width: 34%;
  margin: 0 auto;

}
.form-header{
    width: 430px;
    border: none;
}
.slect{
    width: 204px;
}
.content{
   width: 90%;
   margin: 0 auto;
   margin-top: 30px;
}
</style>